<link rel="stylesheet" href="/assets/home/css/search.css">
<link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css">
<script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>

<body>
    <!-- 搜索框 -->
    <div class="mui-input-row mui-search">
        <input type="search" class="mui-input-clear" placeholder="请输入课程名称" name="search" />
    </div>

    <!-- 课程列表 -->
    <div id="mescroll" class="mescroll">
        <ul id="list" class="mui-table-view"></ul> 
    </div>
    

   <!-- 底部 -->
{include file="common/menu" /}
</body>
<script>
    var search = ''

    $("input[name=search]").change(function(){
        search = $.trim($(this).val());

        // 触发下拉加载
        DownCallback();
    })

    var mescroll = new MeScroll('mescroll',{
        down:{
            auto:false,//是否在初始化完毕后自动执行下拉回调函数callback;默认true
            callback:DownCallback //下拉刷新的回调函数
        },
        up:{
            page:{
                num:0,//默认从第0页开始
                size:20,//每页显示多少条
                time:null,//时间
            },
            auto:true,//是否在初始化完毕后自动执行上拉加载第一页的数据，默认为false
            isBounce:false,//禁止ios回弹 
            callback:UpCallBack, //上拉回调，此处可简写，相当于callback:function(page){UpCallBack(page);}
            htmlNodata:`<div class="more">没有更多了..</div>`,
            toTop: {
				//回到顶部按钮
                duration:600,

                src: "/assets/home/images/mescroll-totop.png", //图片路径,默认null,支持网络图
                offset: 100 //列表滚动1000px才显示回到顶部按钮	
            }
        }
    })

    function DownCallback(){
        // 下拉的回调函数，默认重置上拉加载列表为第一位
        mescroll.resetUpScroll();
        $("#list").empty();
    }

    function UpCallBack(current){
        // 当前页码值
        page = current.num
        limit = current.size

        // 组装数据
        var data = {
            page,
            limit,
            search
        }

        $.ajax({
            url:`{:url('home/index/search')}`,
            type:'post',
            data:data,
            dataType:'json',
            success:function(success){
                if(success.code == 0){
                    // 提示
                    mui.toast(success.msg,{duration:1000})

                    // 暂无更多数据
                    mescroll.endBySize(0,0)
                    return false
                }
               
                var list = success.data.list
                var count = success.data.count

                // 设置上拉加载状态
                mescroll.endBySize(list.length,count)

                // 渲染到列表中
                FetchList(list);

            },
            error:function(error){
                console.log(error)
            }
        })

    }
    // 渲染页面数据
    function FetchList(list){
        var html = ''
        for(var item of list){
            html += `
            <li class="mui-table-view-cell mui-media">
            <a class="item" href="{:url('home/index/info')}?pid=${item.id}">
                <div class="thumb">
                    <img class="img" src="${item.thumbs_text}"">
                </div>
                <div class="info">
                    <h5 class="title">${item.title}</h5>
                    <p class="content mui-ellipsis">课程分类：${item.category.name}</p>
                    <p class="content mui-ellipsis">创建时间：${item.createtime_text}</p>
                    <p class="bottom">
                        <span class="like mui-icon mui-icon-starhalf">
                            <span>${item.likes_text}</span>
                        </span>
                        <span class="price">${item.price}</span>
                    </p>
                </div>
            </a>
        </li>
            `
        }

        $("#list").append(html)
    }
</script>
